<template>
	<view class="bgc-white">
		<!-- :style="{ 'padding-bottom': `${safe}px` }" -->
		<view class="tabbarbox" :class="{ fiexd }">
			<view class="tabbarbox-warpper">
				<view class="tabbarbox-items" v-for="(item, index) in tabbarlist" @tap.stop="switchTab(index)" :key="index">
					<view class="tabbarbox-items-box mb-5">
						<image :src="elIconPath(index)" class="tabbarbox-items-box__icon" />
					</view>
					
					<text class="tabbarbox-items__text" :style="{ color: elColor(index) }">{{item.text}}</text>
				</view>
			</view>
			<view :style="{ height: `${safe}px` }" v-if="fiexd" />
		</view>
		
		<view v-if="placeholder && fiexd" class="tabbarbox-placeholder" />
		<view :style="{ height: `${safe}px` }" v-if="fiexd" />
	</view>
</template>

<script setup>
	
	import { ref, computed } from 'vue'
	import { onShow } from "@dcloudio/uni-app"
	
	const tabbarlist = [
		{
			pagePath: "/pages/tabbar/home/index",
			iconPath: "/static/tabbar/0.png",
			selectedIconPath: "/static/tabbar/1.png",
			text: "首页"
		},{
			pagePath: "/pages/tabbar/record/index",
			iconPath: "/static/tabbar/2.png",
			selectedIconPath: "/static/tabbar/3.png",
			text: "销课记录"
		},{
			pagePath: "/pages/tabbar/ranking",
			iconPath: "/static/tabbar/5.png",
			selectedIconPath: "/static/tabbar/6.png",
			text: "我的排名"
		},{
			pagePath: "/pages/tabbar/mine",
			iconPath: "/static/tabbar/7.png",
			selectedIconPath: "/static/tabbar/8.png",
			text: "个人中心"
		}
	]
	
	const pageUrl = ref()
	const safe = ref(0)
	
	const props = defineProps({
		// 默认颜色
		inactiveColor: {
			type: String,
			default: '#333333'
		},
		// 激活时的演示，包括字体图标，提示文字等的演示
		activeColor: {
			type: String,
			default: '#0B9AFF'
		},
		// fixed之后塌陷的高度
		placeholder: {
			type: Boolean,
			default: true
		},
		fiexd: {
			type: Boolean,
			default: false
		}
	})
	
	const elIconPath = computed(() => index => {
		const pagePath = tabbarlist[index].pagePath
		if (pagePath == pageUrl.value) return tabbarlist[index].selectedIconPath
		else return tabbarlist[index].iconPath
	})
	
	const elColor = computed(() => index => {
		const pagePath = tabbarlist[index].pagePath
		if(pagePath == pageUrl.value) return props.activeColor
		else return props.inactiveColor
	})
	
	safe.value = uni.getSystemInfoSync().safeAreaInsets.bottom
	const pages = getCurrentPages()
	pageUrl.value = `/${pages[pages.length - 1].route}`
	
	function getEl(el) {
		if (typeof el === 'string' || typeof el === 'number') return el
		if (WXEnvironment) return el.ref
		else return el instanceof HTMLElement ? el : el.$el
	}
	
	const switchTab = index => uni.switchTab({ url: tabbarlist[index].pagePath })
	
	onShow(() => uni.hideTabBar({ fail: res => console.log('hideTabBar', res) }))
	
</script>

<style scoped lang="scss">
	.fiexd{position: fixed;bottom: 0;left: 0;right: 0; z-index: 22;}
	
	.tabbarbox{
		border-top: 1rpx solid #f1f1f1;
		background-color: #ffffff;
		
		&-warpper{
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			align-items: center;
			flex: 1;
			position: relative;
			/* #ifndef APP-NVUE */
			box-sizing: content-box;
			/* #endif */
			padding: 20rpx 0;
			z-index: 20;
		}
		
		&-items{
			flex: 1;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: column;
			align-items: center;
			justify-content: center;
			&__text{font-size: 20rpx;line-height: 1;margin-top: 5rpx}
		}
		
		&-items-box{&__icon{width: 40rpx;height: 40rpx}}
		&-placeholder{height: 108rpx}
	} 
	
</style>
